<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Demo Progressive Web Application</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta
			name="description"
			content="This a Demo Progressive Web Application which will work in offline, has a splash screen add to home screen etc,."
		/>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<meta name="theme-color" content="#29434d" />
		<meta name="msapplication-TileColor" content="#29434d" />
		<meta name="msapplication-TileImage" content="./images/icons/mstile-150x150.png" />
		<meta name="mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<meta name="apple-mobile-web-app-title" content="Progressive Web Application" />
		<meta name="application-name" content="Progressive Web Application" />
		<link rel="apple-touch-icon" href="./images/icons/apple-touch-icon.png" />
		<link rel="icon" type="image/png" href="./images/icons/favicon-32x32.png" sizes="32x32" />
		<link rel="icon" type="image/png" href="./images/icons/favicon-16x16.png" sizes="16x16" />
		<link rel="manifest" href="./manifest.json" />
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" />
		<link rel="stylesheet" href="./css/styles.css" />
	</head>

	<body>
		<div class="app app__layout">
			<header>
				<span class="header__icon">
					<svg class="menu__icon no--select" width="24px" height="24px" viewBox="0 0 48 48" fill="#fff">
						<path d="M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z"></path>
					</svg>
				</span>

				<span class="header__title no--select">Progressive Web Application</span>
			</header>

			<div class="menu">
				<div class="menu__header"></div>
				<ul class="menu__list">
					<li><a target="_blank" rel="noopener" href="https://github.com/gokulkrishh">Author</a></li>
					<li><a target="_blank" rel="noopener" href="https://github.com/gokulkrishh/demo-progressive-web-app">Source</a></li>
				</ul>
			</div>
			<div class="menu__overlay"></div>

			<div class="app__content">
				<h3>Github Profile Card:</h3>

				<div class="card">
					<div class="card__spinner"></div>
					<div class="card__container">
						<img alt="avatar" class="card__img" src="" />
						<p class="card__title"></p>
						<p class="card__desc"></p>
						<p class="card__temp"><b>Company: </b> <span></span></p>
						<p class="card__following"><b>Following: </b> <span></span></p>
						<p class="card__followers"><b>Followers: </b> <span></span></p>
						<div class="add__to-card">
							<input type="text" class="add__input" placeholder="Enter a github username" /> <button class="add__btn">Add</button>
						</div>
					</div>
				</div>

				<div class="add__card">
					<h3>
						<a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2015/12/background-sync"
							>Background Sync API</a
						>
					</h3>
					<h3>Emulate via chrome devTools</h3>
					<h4>
						Enable BG Sync: <span class="bg-sync__text" hidden>Registered</span>
						<span class="custom__button custom__button-bg"> <button class="turn-on-sync">Register</button> </span>
					</h4>
					<ul>
						<li><b>Step 1: </b> Go offline in devTools and register BG Sync.</li>
						<li><b>Step 2: </b>Go to application tab in chrome devTools and navigate to serviceWorker tab.</li>
						<li><b>Step 3: </b>Go online and click `sync` button to emulate bg sync.</li>
						<li><b>Step 4: </b>Above card will be updated as per your input.</li>
					</ul>
				</div>

				<div class="card__spinner"></div>

				<div class="share__container">
					<h3>
						<a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2016/10/navigator-share">Web Share API</a>
					</h3>
					<button class="share">Share</button>
				</div>

				<div class="share__container">
					<h3>
						<a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2017/02/navigation-preload"
							>Navigation Preload</a
						>
					</h3>
					<ul>
						<li>
							<b>Step 1: </b>Toggle
							<a href="chrome://flags/#enable-experimental-web-platform-features" target="_blank" rel="noopener"
								>chrome://flags/#enable-service-worker-navigation-preload</a
							>
						</li>
						<li><b>OR </b></li>
						<li>
							<a href="https://github.com/jpchase/OriginTrials/blob/gh-pages/developer-guide.md">Try Origin Trial Token</a> in chrome
							stable.
						</li>
					</ul>
				</div>

				<div class="fab fab__push">
					<div class="fab__ripple"></div>
					<img class="fab__image" src="./images/push-off.png" alt="Push Notification" />
				</div>

				<!-- Toast msg -->
				<div class="toast__msg"></div>
			</div>
		</div>

		<!-- JS Files  -->
		<script src="./js/toast.js"></script>
		<script src="./js/main.js"></script>
		<script src="./js/offline.js"></script>
		<script src="./js/app.js"></script>
		<script src="./js/push.js"></script>
		<script src="./js/sync.js"></script>
		<script src="./js/share.js"></script>
		<script src="./js/menu.js"></script>

		<!-- My Google Analytics Report -->
		<script>
			(function(i, s, o, g, r, a, m) {
				i['GoogleAnalyticsObject'] = r;
				(i[r] =
					i[r] ||
					function() {
						(i[r].q = i[r].q || []).push(arguments);
					}),
					(i[r].l = 1 * new Date());
				(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
				a.async = 1;
				a.src = g;
				m.parentNode.insertBefore(a, m);
			})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

			ga('create', 'UA-92627241-1', 'auto');
			ga('send', 'pageview');
		</script>
	</body>
</html>
